<template>
  <div class="trends-wrapper" :style="{ 'height': documentClientHeight + 'px' }">
    <div class="content" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="(trend, index) in trendsList" :key="trend.id">
        <p class="date" v-if="index===0 || trend.dynamicCreateTime !== trendsList[index-1].dynamicCreateTime">{{trend.dynamicCreateTime}}</p>
        <div class="trend-detail">
          <p class="row-1">{{trend.dynamicExecutiveName}} <span v-if="trend.dynamicDatatype==='1'">{{trend.dynamicPerformOperation}}</span></p>
          <span class="row-2" @click="viewData(trend)">{{dynamicAscription[Number(trend.dynamicAscription)-1]}} - {{trend.dynamicBelongName}}</span>
          <p class="row-3">{{trend.dynamicContent}}</p>
        </div>
      </div>
    </div>
    <AddOrEdit ref="AddOrEdit" />
  </div>
</template>

<script>
import AddOrEdit from './storage/add-or-edit'
export default {
  name: '',
  data () {
    return {
      documentClientHeight: '',
      isFirstLoading: true,
      loading: false,
      page: 1,
      limit: 30,
      totalPage: 1,
      trendsList: [],
      dynamicAscription: ['权限模块','生产计划模块','产品模块','资产模块','计件入库模块','补贴模块','工艺模块'],
      addDialogVisible: false,
    };
  },
  components: {
    AddOrEdit
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    }
  },
  mounted () {
    this.documentClientHeight = document.documentElement['clientHeight'] - 70
    window.onresize = () => {
      this.documentClientHeight = document.documentElement['clientHeight'] - 70
    }
    this.searchData(true)
  },
  methods: {
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.searchData();
    },
    async searchData(init) {
      if(init) {
        this.page = 1;
        this.isFirstLoading = true;
      }
      let {list, totalPage} = await this.$httpN.postB('pc/pcdynamic/list', {
        page: this.page,
        limit: this.limit
      })
      this.trendsList.push(...list);
      this.loading = false;
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    viewData(trend) {
      if(trend.dynamicAscription !== '5' && trend.dynamicAscription !== '6') return
      this.addDialogVisible = true
      this.$nextTick(() => {
        this.$refs.AddOrEdit.viewData(trend.dynamicBelongId,trend.dynamicAscription==='5' ? false : true);
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.trends-wrapper{
  .content{
    z-index: 2;
    height: 100%;
    overflow-y: auto;
    position: relative;
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      scrollbar-arrow-color:red;
    }
    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 5px;
      box-shadow: inset 0 0 5px #DEDEDE;
      background: rgba(0,0,0,0.2);
      scrollbar-arrow-color:red;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
      box-shadow: inset 0 0 5px #F5F5F5;
      border-radius: 0;
      background: rgba(0,0,0,0.1);
    }
    .date{
      font-size: 18px;
      margin: 20px 0;
      padding: 0 20px;
    }
    .trend-detail{
      padding: 20px 40px;
      border-bottom: 1px solid #DCDFE6;
      p{
        margin: 0;
      }
      .row-1{
        span{
          margin-left: 15px;
          color:#606266;
        }
      }
      .row-2{
        margin: 10px 0;
        font-size: 13px;
        display: inline-block;
        color: #C0C4CC;
        cursor: pointer;
        &:hover{
          color: #409EFF;
        }
      }
      .row-3{
        color: #909399;
        white-space: pre-line;
      }
    }
  }
}
</style>